import React, { useEffect, useState } from 'react';
import service from '../../api'
import "./Index.scss"
import { AppstoreOutlined, MailOutlined, SettingOutlined, UserSwitchOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Dropdown, MenuProps, Menu } from 'antd';

import { Outlet, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import Mybread from '../../components/Mybread'
import Qxyz from '../../router/QxyzGly';

//导入图片
import touxiang from './1.jpg'
import store from '../../store';
import Sider from 'antd/es/layout/Sider';







interface Props { }

function Index(props: Props) {

    var [shouqi, useShouqi] = useState(false)
    var userInfo = useSelector((state: any) => state.userInfo)
    var navigate = useNavigate()
    var dispatch = useDispatch()
    var requestLannerList = async () => {
        var res = await service.banner.bannerList();
    }
    //导航组件
    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    }
    //把数据转换成菜单
    const items: MenuProps['items'] = [
        getItem('首页', '/', <MailOutlined />),

        getItem('轮播图管理', 'banner', <MailOutlined />, [
            getItem('轮播图列表', '/index/banner'),

        ]),

        getItem('账号管理', 'address', <AppstoreOutlined />, [
            getItem('管理员列表', '/index/address'),

        ]),

        { type: 'divider' },

        getItem('产品管理', 'pro', <SettingOutlined />, [
            getItem('产品列表', '/index/pro'),
            getItem('秒杀列表', '/index/seckill'),
            getItem('推荐列表', '/index/command'),
            getItem('筛选列表', '/index/search'),

        ]),
        getItem('数据可视化', 'sub', <SettingOutlined />, [
            getItem('echarts使用', '/index/sub')

        ]),
        getItem('编辑器', 'change', <SettingOutlined />, [
            getItem('编辑器使用', '/index/change'),

        ]),
        getItem('excel管理', 'excel', <SettingOutlined />, [
            getItem('excel使用', '/index/excel'),

        ]),
        getItem('地图管理', 'bmap', <SettingOutlined />, [
            getItem('百度地图', '/index/bmap'),

        ]),
    ];
    

    useEffect(() => {
        requestLannerList();
    }, [])
    var onClick = ({ item, key, keyPath }: any) => {
        navigate(key);
        dispatch({ type: 'SAVE_MYBREAD', payload: keyPath })
    }
    var tuichu = () => {
        dispatch({ type: 'REMOVE_USERINFO' })
        navigate('/login')
    }
    var Shouqi = () => {
        useShouqi(!shouqi)
    }
    const xialaitems: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <p>修改</p>
            ),
        },
        {
            key: '2',
            label: (
                <p onClick={tuichu}>退出</p>
            ),
        },
    ];



    return (
        <div id='app'>

            <Sider collapsed={shouqi}
            >
                <header>

                    <div className='touxiang'>
                        <img src={touxiang} alt="" />
                        <span>{!shouqi && 'XX管理后台'}</span>
                    </div>
                </header>
                <Menu

                    theme='dark'
                    onClick={onClick}
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={items}
                /></Sider>

            <div className='box'>
                <header>
                    <div className='name'>
                        <span className='qianhuan' onClick={Shouqi}>
                            {shouqi ?
                                <MenuUnfoldOutlined /> : <MenuFoldOutlined />
                            }

                        </span>
                        <div className='tuichu'>
                            <span>欢迎您:{userInfo.adminname}</span>
                            <Dropdown menu={{ items: xialaitems }} placement="bottom" arrow>
                                <UserSwitchOutlined />
                            </Dropdown>
                        </div>
                    </div>
                </header>
                <main>
                    <div className='title'>
                        <div className='jiaobiao'>
                            <Mybread />
                        </div>
                        <Outlet />
                    </div>
                </main>
            </div>
        </div>
    );
}

export default Index;